import { useState } from 'react'
import './CustomList.scss'

import { Badge, Tag } from 'antd'
import { useRequest, useSetState } from 'ahooks'

import { Http } from '../../../Api'

import { SaveFilesUrl } from '../Common/options'
import { CheckOutlined, CaretRightOutlined } from '@ant-design/icons'

export const CustomList = ({ TableListData }) => {
    const { record, page } = TableListData

    const Data = page === 'one' ? record.childrenSubmitted : record.childrenUnSubmitted
    const statusMapping = {
        0: { text: '未提交', state: 'error' },
        1: { text: '提交于', state: 'success' },
        2: { text: '迟交于', state: 'warning' },
    }

    const [Active, setActive] = useState([])

    const [DataList, setDataList] = useSetState({})

    const { runAsync: getUuid } = useRequest(Http, { manual: true })
    const { runAsync: getList } = useRequest(Http, { manual: true })
    const { runAsync: getAdded } = useRequest(Http, { manual: true })

    // posWeeklyReportsAdded
    const onClick = uuid => {
        if (page === 'two') return
        if (Active.includes(uuid)) {
            const data = Active.filter(v => v !== uuid)
            setActive(data)
        } else {
            getAdded({ url: 'posWeeklyReportsAdded', data: { uuid } }).then(() => {
                getUuid({ url: 'getWeeklyReportsUuid', path: [uuid] }).then(list => {
                    getList({ url: 'getAttachmentDetails', data: { annexUuid: uuid } }).then(annex => {
                        setDataList({ [uuid]: { data: list.ht, user: list.list, annex: annex.list } })
                        setActive([...Active, uuid])
                    })
                })
            })
        }
    }

    return (
        <div className="CustomList">
            {Data.map(({ uuid, departmentName, createUserName, status, createTime, dictionaryUuid, friday }) => (
                <div key={uuid}>
                    <div className="Title" onClick={() => onClick(uuid)}>
                        <div>
                            {createUserName}-{departmentName}
                        </div>
                        <CaretRightOutlined style={{ transform: `rotate(${Active.includes(uuid) ? 90 : 0}deg)` }} />
                    </div>
                    {DataList[uuid] && (
                        <div className="List" style={{ height: Active.includes(uuid) ? 'auto' : 0 }}>
                            {console.log(DataList[uuid])}
                            <Badge
                                status={statusMapping[DataList[uuid].data.status].state}
                                text={`${statusMapping[DataList[uuid].data.status].text} ${
                                    DataList[uuid].data.createTime
                                }`}
                            />
                            <div className="Item">
                                <div>汇报给 : </div>
                                <div>
                                    {DataList[uuid].user.map(({ uuid, fullName, isRead }) => (
                                        <Tag
                                            key={uuid}
                                            icon={isRead === 0 ? '' : <CheckOutlined />}
                                            color={isRead === 0 ? 'default' : 'success'}
                                        >
                                            {fullName}
                                        </Tag>
                                    ))}
                                </div>
                            </div>
                            <div className="Item">
                                <div>周报信息 : </div>
                                <div className="AnnexList">
                                    {DataList[uuid].annex.map(({ uuid, originalName, fileUrl }) => (
                                        <div key={uuid}>
                                            <div>{originalName}</div>
                                            <SaveFilesUrl url={fileUrl} originalName={originalName} title="下载" />
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                    )}
                </div>
            ))}
        </div>
    )
}
